<template>
  <view class="content">
    <u-loading-icon :show="show" :color="color" textColor="#ccc" text="加载中" :duration="1000">
    </u-loading-icon>
    <view v-show="!show && showMore" class="not-more">{{ title }}</view>
  </view>
</template>

<script setup lang="ts">
/**
 * @description: 加载更多组件
 * @param {Boolean} show 是否显示加载更多
 * @param {String} color 加载更多颜色
 * @param {Boolean} showMore 是否显示没有更多了 默认显示 ,为true则显示文本  【没有更多了】
 * @example <h-loading :show="showLoading" :showMore="list.length" ></h-loading>
 */
defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '没有更多了',
  },
  color: {
    type: String,
    default: '#00C1B9',
  },
  showMore: {
    type: [Boolean, Number, Array],
    default: true,
  },
})
</script>

<style lang="scss" scoped>
.content {
  //   margin-top: 20rpx;
}

.not-more {
  width: 100%;
  padding: 12rpx 0;
  text-align: center;
  color: #868686;
}
</style>
